<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_util": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_util": "active",
      "util_extras": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">Utilities</a></li>
              <li class="breadcrumb-item active" aria-current="page">Extras</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              
              <h1 class="td-title">Extras</h1>
        <p class="td-lead">Use some extra class utilities to quickly style the element. Great for cards, text, buttons, or any other element.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Opacity</h4>
        <p class="mg-b-30">You can set opacity to an element instantly by using the following utilities classes for opacity.</p>

        <div data-label="Example" class="td-example">
          <div class="row row-sm">
            <div class="col-sm">
              <div class="card card-body tx-white bg-primary ht-100p op-4">
                Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
              </div>
            </div><!-- col -->
            <div class="col-sm mg-t-10 mg-sm-t-0">
              <img src="https://via.placeholder.com/640x426" class="img-fluid op-5" alt="">
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;card card-body op-4&quot;&gt;...&lt;/div&gt;
&lt;img src=&quot;https://via.placeholder.com/640x426&quot; class=&quot;img-fluid op-5&quot; alt=&quot;&quot;&gt;</code></pre>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.op-[value]</td>
                <td>0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <div class="table-responsive">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  .op-[breakpoint]-[value]
                </td>
                <td>
                  <p class="mg-b-5">breakpoint: xs | sm | md | lg | xl</p>
                  <p class="mg-b-0">value: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section2" class="mg-b-10">Shadow</h4>
        <p class="mg-b-30">You can add or remove shadow to an element instantly by using the following utilities classes for shadow.</p>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.shadow-base</td>
                <td>Add shadow to any box element.</td>
              </tr>
              <tr>
                <td>.shadow-none</td>
                <td>Remove shadow to any box element.</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        @@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Opacity</a>
            <a href="#section2" class="nav-link">Shadow</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->

    @@include('./_script.html',{})
    <script>
      $(function(){
        'use strict'
      });
    </script>
  </body>
</html>
